<template>

    <div class="add-user-page">
        <el-card shadow="never">
            <template slot="header">
                修改密码
            </template>

            <template slot="default">

                        <el-form label-position="right" :model="reset" ref="form" :rules="rule" :disabled="loading" :label-width="label_width">
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="旧密码"  size="small">
                                        <el-input

                                                show-password
                                                placeholder="请输入原密码"
                                                auto-complete="new-password"
                                                v-model="reset.old_password"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="8">
                                    <el-form-item label="新密码" :label-width="label_width" size="small">
                                        <el-input
                                                placeholder="请输入新密码"
                                                show-password
                                                auto-complete="new-password"
                                                v-model="reset.password"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="8">
                                    <el-form-item  label="确认密码" :label-width="label_width" size="small" >
                                        <el-input
                                                show-password
                                                placeholder="请再次输入新密码"
                                                auto-complete="new-password"
                                                v-model="reset.re_password"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="8">
                                    <el-form-item  >
                                        <el-button :loading="loading" type="primary" @click="submit"  size="medium">保 存</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                        <div>
                        </div>
            </template>
        </el-card>
    </div>
</template>

<script>
    import {resetPass} from "../api/himq_http";
    export default {
        name: "UserEditPage",
        data() {
            const password = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else if (value.length < 6 || value.length > 26) {
                    callback(new Error('账号长度在6到26个英文字符'));
                }
                callback()
            };

            const re_password = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.add_user.password) {
                    callback(new Error('两次输入密码不一致!'));
                }
                callback();
            }
            return {
                label_width: '100px',
                loading:false,
                reset:{
                    old_password:'',
                    password:'',
                    re_password:'',
                },
                rule:{
                    password: [
                        {validator: password, trigger: 'blur'},
                    ],
                    re_password: [
                        {validator: re_password, trigger: 'blur'},
                    ],
                }

            }
        },
        created() {
            console.log("id",this.$route.query.id);
        },

        methods: {
            submit(){
                this.loading=true;
                let that = this;
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        resetPass(that.reset).then(
                            resp=>{
                                that.loading=false
                                that.$toast({message:resp.message, type: "success"})
                                that.$router.push({name:'login'})
                            },err=>{
                                this.loading=false
                                that.$toast({message:err.message, type: "warning"})
                            }
                        )
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        },
    }
</script>

